<template>
  <div id="appAdd">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit"> <i class="el-icon-edit-outline"/> {{ tits }}</span>
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
        >
          <i
            slot="reference"
            class="el-icon-question"
            style="color:#409eff;margin-left:5px;font-size:20px;"
          />
        </el-popover>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
      >
        <div v-if="Add == 'true'">
          <el-form-item label="附加值名称">
            <el-input v-model="form.appAddName"/>
            <span
              v-show="tit.appAddName"
              class="errortitle"
            >附加值名称不能为空</span>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="附加值名称">
            <el-input v-model="form.appAddName" :disabled="true"/>
            <span
              v-show="tit.appAddName"
              class="errortitle"
            >附加值名称不能为空</span>
          </el-form-item>
        </div>
        <el-form-item label="附加值描述">
          <el-input
            v-model="form.appAddDesc"
            type="textarea"
            autosize
          />
        </el-form-item>

        <el-button
          class="appendArr"
          @click="appendArr"
        >添加</el-button>
        <div
          v-for="(item,index) in formtable"
          :key="index"
          class="styArr"
        >
          <el-input
            v-model="item.key"
            class="arrinp"
            autosize
          />
          <el-input
            v-model="item.value"
            type="textarea"
            class="arrinp"
            autosize
            placeholder="请输入内容"/>
          <!--<el-input-->
          <!--class="arrinp"-->
          <!--autosize-->
          <!--v-model="item.value"-->
          <!--&gt;-->
          <!--</el-input>-->
          <i
            class="el-icon-delete"
            @click="deletes(index)"
          />
        </div>
        <div style="clear:both"/>
      </el-form>

      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >保存</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<style>
#appAdd .modelbox {
  width: 800px;
  margin-bottom: 20px;
}
#appAdd .el-checkbox {
  width: 260px;
}
#appAdd .el-icon-delete {
  font-size: 20px;
  margin-top: 10px;
}
#appAdd #mainBox #boxTit .tit i {
  margin-right: 10px;
}
#appAdd #mainBox {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#appAdd #mainBox #boxTit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#appAdd #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
}
#appAdd #mainBox .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#appAdd #mainBox .btn .el-button {
  margin-right: 30px;
}
#appAdd .el-form {
  margin: 90px 150px;
  margin-bottom: 50px;
}
#appAdd .el-input {
  width: 350px;
}
#appAdd .el-input__suffix {
  top: 1px;
}
#appAdd .el-form-item__content {
  width: 100%;
}
#appAdd .errortitle {
  color: red;
}
#appAdd .next {
  background: #623f18;
  color: #fff;
}
#appAdd .back {
  border-color: #623f18;
  color: #623f18;
}
#appAdd .el-textarea {
  width: 350px;
}
textarea{
  min-height: 40px;
}
#appAdd #add .btn {
  position: relative;
  text-align: center;
  width: 30px;
  color: aqua;
  font-size: 20px;
  float: left;
  padding: 0px;
  background: none;
  border: none;
}
#appAdd .styArr {
  margin-left: 110px;
  margin-bottom: 5px;
  width: 380px;
}

#appAdd .appendArr {
  margin-left: 35px;
  float: left;
}
#appAdd .arrinp {
  width: 175px;
  vertical-align: top;
}
</style>
<script>
import { tsdSave, tsdDesc } from '@/api/page'

export default {
  data() {
    return {
      tits: '',
      form: {
        appAddName: '',
        appAddDesc: ''
      },
      formtable: [],
      tit: {
        appAddName: false
      },
      Add: ''
    }
  },
  mounted() {
    this.Add = localStorage.getItem('proAdd')
    if (this.Add == 'true') {
      this.tits = '添加条件附加值'
    } else {
      this.tits = '修改条件附加值'
      var data = {}
      data.mid = localStorage.getItem('mid')
      data.id = localStorage.getItem('styId')
      tsdDesc(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.form.appAddName = response.data.data.model.name
          this.form.appAddDesc = response.data.data.model.decrypt
          var formtable = response.data.data.model.condition
        }
        var obj = {}

        for (var key in formtable) {
          obj.key = key
          if (typeof formtable[key] === 'object') {
            obj.value = JSON.stringify(formtable[key])
          } else {
            obj.value = formtable[key]
          }
          // obj.value = formtable[key];
          this.formtable.push(obj)
          obj = {}
        }
      })
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1)
    },
    deletes(a) {
      this.formtable.splice(a, 1)
      console.log(this.formtable)
    },
    onSubmit() {
      var data = {}

      if (this.Add == 'false') {
        data.id = localStorage.getItem('styId')
      }
      data.mid = localStorage.getItem('mid')
      data.type = 'CONDITION'
      data.name = this.form.appAddName
      data.decrypt = this.form.appAddDesc
      var keyValues = {}

      for (var i = 0; i < this.formtable.length; i++) {
        if (this.formtable[i].key !== undefined) {
          function isJSON(str) {
            if (typeof str === 'string') {
              try {
                var obj = JSON.parse(str)
                if (typeof obj === 'object' && obj) {
                  return true
                } else {
                  return false
                }
              } catch (e) {
                // console.log('error：'+str+'!!!'+e);
                return false
              }
            }
            // console.log('It is not a string!')
          }
          isJSON(this.formtable[i].value)
          if (isJSON(this.formtable[i].value)) {
            keyValues[this.formtable[i].key] = JSON.parse(this.formtable[i].value)
          } else {
            keyValues[this.formtable[i].key] = this.formtable[i].value
          }
          // keyValues[this.formtable[i].key] = this.formtable[i].value;
        }
      }
      data.condition = keyValues

      tsdSave(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.openFullScreen()
          setTimeout(() => {
            this.loading.close()
            this.$router.push('conaddval')
          }, 1000)
        }
      })
    },
    appendArr() {
      var obj = {}
      this.formtable.push(obj)
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
  }
  // asda
}
</script>
